<template>
  <div style="height:100%">
    <div class="login-top">
      <span class="fl">
        <img src="../../assets/images/logo-system.png">
      </span>
      <span class="fr">
        <img src="../../assets/images/logo-company.png">
      </span>
    </div>
    <div class="login-con">
      <div class="login-box">
        <el-form class="login-form" ref="formData" :model="formData" :rules="formRule" label-width="80px">
          <el-form-item class="login-form-label" label="账号" prop="userName">
            <el-input v-model="formData.userName" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item class="login-form-label" label="密码" prop="password">
            <el-input v-model="formData.password" :type="!canPasswordView?'password':'text'" auto-complete="off">
              <i slot="suffix" class="el-input__icon el-icon-view" @click="changePasswordInputType"></i>
            </el-input>
          </el-form-item>
          <el-form-item class="login-form-label" label="账号类型" prop="type">
            <el-select v-model="formData.type" placeholder="请选择账号类型">
              <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="center">
            <el-button @click="submitForm('formData')">登录</el-button>
            <el-button @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="login-footer">
      <span>版权所有
        <span class="pdl-10">上海汽车变速器有限公司</span>
      </span>
      <span class="pdl-100">开发单位
        <span class="pdl-10">上海骏诺信息科技有限公司</span>
      </span>
    </div>
  </div>
</template>

<script>
  import {loginService} from 'service/auth';
  import {mapMutations} from 'vuex';
  import {setToken, setName, setUserName} from 'utils/storage';
  export default {
    name: 'login',
    data() {
      return {
        typeOption: [{
          value: '0',
          label: '检测单位'
        }, {
          value: '1',
          label: '客户账号'
        }],
        canPasswordView: false,
        formData: {
          userName: '',
          password: '',
          type: '0',
        },
        formRule: {
          userName: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur',
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          }]
        }
      }
    },
    methods: {
      changePasswordInputType() {
        this.canPasswordView = !this.canPasswordView;
      },
      submitForm(formName) {
        this.$message('登陆中');
        // 若用户直接关闭浏览器，手动将存储的导航菜单选中项清除
        if(localStorage.getItem('menuActive') != null) {
          localStorage.clear();
        }
        // loginService("admin", "admin")
        //   .then(res => {
        //     console.log(res)
        //   })
        // this.$refs[formName].validate((valid) => {
        //   if(valid) {
        //     loginService(this.formData.userName, this.formData.password)
        //       .then(res => {
        //         console.log(res)
                  this.$router.push({
                    path:'/home/index',
                  });
        //       })
        //   }
        // })
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //     loginService(this.formData)
        //       .then(res => {
        //         if (res.data.status) {
        //           this.SET_NAME(res.data.data.name);
        //           this.SET_USERNAME(this.formData.userName);
        //           this.SET_TOKEN(res.data.token);
        //           setToken(res.data.token);
        //           setName(res.data.data.name);
        //           setUserName(this.formData.userName);
        //           // localStorage.setItem('name',res['data']['data']['name']);
        //           // localStorage.setItem('token',res['data']['token']);
        //           // localStorage.setItem('username',this.formData.userName);
        //           this.$router.push({
        //             path:'/home/index',
        //           });
        //         } else {
        //           this.$message.error('用户名或密码错误');
        //         }
        //       })
        //   } else {
        //     return false;
        //   }
        // });
      },
      resetForm(formName) {
        this.formData = {
          userName: '',
          password: '',
          type: '0',
        }
      },
      ...mapMutations(['SET_NAME','SET_TOKEN','SET_USERNAME'])
    }
  }

</script>

<style scoped>
  .el-button:focus,
  .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }

  .el-select, .el-input {
    width: 100%;
  }

  .fl {
    float: left;
  }

  .fr {
    float: right;
  }

  .center {
    text-align: center;
  }

  .login-top img {
    margin-top: 17px;
  }

  .login-form {
    padding: 20px 100px 30px 100px;
  }

  .login-con {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/login-bg.png") no-repeat;
    background-position: center;
  }

  .login-box {
    width: 670px;
    height: 320px;
    background-image: url("../../assets/images/login-box.png");
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -220px;
    margin-left: -335px;
    padding-top: 155px;
  }

  .login-box form {
    color: #fff;
  }

  .login-box form label {
    color: #fff;
    font-size: 16px;
  }

  .login-box .ant-form-item {
    margin-bottom: 14px;
  }

  .login-box form button {
    color: #fff;
    background: linear-gradient(to bottom, #99d3f8, #0564ad);
    font-size: 16px;
    width: 105px;
    height: 35px;
    border: 1px solid #5693af;
    letter-spacing: 1em;
    text-align: left;
    padding-left: 28px;
  }

  .login-footer {
    height: 40px;
    width: 100%;
    line-height: 40px;
    color: #ffffff;
    text-align: center;
    font-size: 18px;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .pdl-100 {
    padding-left: 100px;
  }

  .pdl-10 {
    padding-left: 10px;
  }

  .letter-1 {
    letter-spacing: 0.8em;
  }

  .relative {
    position: relative;
  }

  /* 屏幕适配 */

  @media (min-width: 1280px) {
    .login-con {
      width: 100%;
      height: 100%;
      background: url("../../assets/images/login-bg.png") no-repeat;
      background-size: cover;
      background-position: 0 -260px;
    }
  }

</style>
